<template>
  <div id="app">
    <div class="container">
      <h1>我的任务管理器</h1>
      <!-- <TaskInput>、<TaskList> 是Vue 组件的标签名，它们来源于代码中导入的子组件 -->

      <!-- 子组件 TaskInput 触发 add-task 事件时，调用父组件的 addTask 方法（添加新任务） -->
      <TaskInput @add-task="addTask" />

      <!-- 子组件 TaskList 触发 remove-task 事件时，调用父组件的 removeTask -->
      <!-- v-bind: 意为 “属性绑定”，表示将后面 "" 里面父组件的 tasks 作为一个动态属性传递给子组件 -->
      <TaskList v-bind:tasks="tasks" @remove-task="removeTask" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TaskInput from './components/TaskInput.vue';
import TaskList from './components/TaskList.vue';
import { type Task } from './types/task';

// uuid: 用于在项目中生成唯一标识符;
//    本项目中确保每个任务有唯一标识：在删除、更新任务时，需要通过 id 精准定位某条任务
import { v4 as uuidv4 } from 'uuid'; // 需要安装 uuid: npm install uuid @types/uuid

// 任务列表状态
const tasks = ref<Task[]>([
  { id: uuidv4(), text: '学习 Vue 基础', completed: true },
  { id: uuidv4(), text: '创建第一个 Vue 项目', completed: false },
  { id: uuidv4(), text: '理解组件概念', completed: false }
]);

// 添加任务
const addTask = (text: string) => {
  // push 方法用于向数组末尾添加新元素，这里即新任务对象
  tasks.value.push({
    id: uuidv4(), // 使用uuid生成唯一id
    text,
    completed: false
  });
};

// 删除任务
const removeTask = (id: string) => {
  // Array.filter() 方法会返回一个新数组，包含所有满足条件（task.id !== id）的元素
  tasks.value = tasks.value.filter(task => task.id !== id);
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

#app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #2c3e50;
}
</style>